<template>
    <div class="version-view">
        <el-timeline :reverse="false" class="version-timeline">
            <el-timeline-item
                    v-for="(version, index) in versions"
                    :key="index" placement="top"
                    :timestamp="version.update_time">
                <el-card class="version-item">
                    <el-row>
                        <el-col :span="18">
                            <div class="version-name">{{version.name}}</div>
                            <div class="version-handler">{{version.handler}}</div>
                            <div class="version-no">{{version.version}}</div>
                        </el-col>
                        <el-col :span="6">
                            <el-button icon="el-icon-edit" class="btn-edit" circle size="mini" type="primary" plain @click="formDialogVisible=true"></el-button>
                            <el-button icon="el-icon-close" plain type="danger" class="btn-delete" circle size="mini"></el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-timeline-item>
        </el-timeline>

        <el-dialog
                title="版本详情"
                :visible.sync="formDialogVisible"
                width="30%">
            <el-form>
                <el-form-item label="版本名称">
                    <el-input v-model="curVersion.name"></el-input>
                </el-form-item>
                <el-form-item label="版本描述">
                    <el-input v-model="curVersion.desc"></el-input>
                </el-form-item>
                <el-form-item label="版本类型">
                    <el-select v-model="curVersion.type">
                        <el-option value="0">测试版本</el-option>
                        <el-option value="1">生产版本</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="版本号">
                    <el-input v-model="curVersion.version"></el-input>
                </el-form-item>
                <el-form-item label="版本更新时间">
                    <el-date-picker
                            v-model="curVersion.update_time"
                            align="right"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="版本更新处理人">
                    <el-input v-model="curVersion.handler"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="formDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="formDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'VersionList',
        props: {
            projectId: {
                type: String,
            }
        },
        data() {
            return {
                formDialogVisible: false,
                curVersion: {
                    id: '',
                    name: ''
                },
                versions: [/*{
                    id: '',
                    name: '版本1',
                    desc: '地铁项目',
                    type: 1,
                    version: '',
                    update_time: '2019-01-01 00:00:00',
                    handler: '李维民'
                }*/]
            }
        },
        created: function(){
          this.loadVersionList(this.projectId);
        },
        methods: {
            loadVersionList: function(projectId){
                let self = this;
                let url = '/api/person/get_list';
                this.$http.post(url, { projectId: projectId }).then(res => {
                    self.versions = res.data.versions;
                }).catch(err => {
                    console.log(err);
                });
            },
            addVersion: function(){

            },
            deleteVersion: function(){

            },
            updateVersion: function(){

            }
        }
    }
</script>
<style lang="scss" scoped>
    .version-view{

        .version-box{
            .btn-group{
                text-align: left;
            }
            .version-timeline{
                margin-top: 0.2rem;

                .btn-delete{
                    float: right;
                    width: 0.3rem;
                    height: 0.3rem;
                }
                .btn-edit{
                    float: right;
                    width: 0.3rem;
                    height: 0.3rem;
                }
            }
        }
    }
</style>
<style lang="scss">
    @import "@/assets/scss/var.scss";
    .version-timeline{
        .el-timeline-item__timestamp{
            color: #a61b29;
        }

        .el-timeline-item__node{
            background: $warning-color;
        }
    }
</style>
